<template>
  <div>
    <!-- 产品信息明细 -->
<!--    <div v-if="!loading">-->
      <div v-for="(item,index) in formData" :key="index" class="body">
        <el-card class="update-log" style="margin-top: 0px">
          <div  class="parent">
            <div ref="downpar" :class="'downpar'+index" v-if="srceee2[index].ifSrceee && !loading">
              <img style="width: 100%;height: 100%;" :src="srceee2[index].picurl" alt="">
            </div>

            <div ref="downpar" :class="'downpar'+index" v-else>
              <div class="pic-part">
                <img  class="logo3" src="@/assets/images/logo3.png" alt="" width="auto" height="45">
                <div class="qrcode-par">
                  <div v-if="srceee[index].ifSrceee">
                    <div class="qrcode" >
                      <img style="width: 100%;height: 100%;" :src="srceee[index].picurl" alt="">
                    </div>
                  </div>
                  <div v-else :id="'qrcode'+index" class="qrcode" ref="qrCodeUrl"></div>
                </div>
              </div>

              <div class="text-par">

                <el-row>
                  <el-col :span="7" class="lightgreen-box">订单编号:</el-col>
                  <el-col :span="16" class="orange-box">{{ item.flowOrderMt.billcode}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="7" class="lightgreen-box">药品名称:</el-col>
                  <el-col :span="16" class="orange-box">{{ item.goodsname }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="7" class="lightgreen-box">医院名称:</el-col>
                  <el-col :span="16" class="orange-box">{{ item.flowOrderMt.hospitalname }}</el-col>
                </el-row>
                <el-row>
                  <el-col style="display: flex" :span="7" class="lightgreen-box"><div style="margin-right: 22px;">数</div><div>量:</div></el-col>
                  <el-col :span="16" class="orange-box">{{ item.num }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="7" class="lightgreen-box">标示时间:</el-col>
                  <el-col :span="16" class="orange-box">{{ item.ufFlagtime }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="7" class="lightgreen-box">标示活度:</el-col>
                  <el-col :span="16" class="orange-box">{{ item.ufGoodsrat }}</el-col>
                </el-row>

              </div>
            </div>

            <div style="font-size: 13px" @click="ifShowClick(index)">
              <!--            <div style="display: flex;justify-content: end;">-->
              <!--              <span v-if="item.ifShow">收起</span>-->
              <!--              <span v-else>展开</span>-->
              <!--            </div>-->
              <div style="display: flex;justify-content: end;">
                <img v-if="item.ifShow" src="@/assets/images/shouqi1.png" alt="" width="40" height="40">
                <img v-else src="@/assets/images/zhankai1.png" alt="" width="40" height="40">
              </div>
            </div>
          </div>
          <!--        <div>{{ formData }}</div>-->
          <div v-if="item.ifShow" style="margin-top: 10px;">
            <el-col :xs="24" :sm="24" :md="12" :lg="24">
              <el-form ref="elForm" :model="item" :rules="rules" size="medium" label-width="120px">
                <!--              <el-col :lg="8">-->
                <!--                <el-form-item label="药品名称">-->
                <!--                  <el-input v-model="item.goodsname" placeholder="" readonly></el-input>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <!--              <el-col :lg="8">-->
                <!--                <el-form-item label="订单日期">-->
                <!--                  <el-date-picker v-model="item.flowOrderMt.orderDate" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"-->
                <!--                                  :style="{width: '100%'}" placeholder="" clearable readonly></el-date-picker>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <!--              <el-col :lg="8">-->
                <!--                <el-form-item label="生产企业名称">-->
                <!--                  <el-input v-model="item.flowOrderMt.manufacturer" placeholder="" clearable readonly></el-input>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <el-col :lg="8">
                  <el-form-item label="标示时间">
                    <el-input v-model="item.ufFlagtime" placeholder="" clearable readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="放射性活度">
                    <el-input v-model="item.ufGoodsrat" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="数量">
                    <el-input v-model="item.num" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="批号">
                    <el-input v-model="item.flowZsDt.batchcode" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="特殊要求">
                    <!--                  -->
                    <el-input v-model="item.specRequmts" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="生产日期">
                    <el-date-picker v-model="item.flowZsDt.produceDate" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
                                    :style="{width: '100%'}" placeholder="" clearable readonly></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="有效期">
                    <el-date-picker v-model="item.flowZsDt.validDate" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
                                    :style="{width: '100%'}" placeholder="" clearable readonly></el-date-picker>
                  </el-form-item>
                </el-col>
                <!--              <el-col :lg="8">-->
                <!--                <el-form-item label="生产企业">-->
                <!--                  <el-input v-model="formData.field102" placeholder="" readonly></el-input>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <el-col :lg="8">
                  <el-form-item label="发货人">
                    <el-input v-model="item.flowZsDt.shipper" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>

                <el-col :lg="8">
                  <el-form-item label="运输单位">
                    <el-input v-model="item.flowZsDt.transportUnit" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="车辆信息">
                    <el-input v-model="item.flowZsDt.vehicleInfo" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="驾驶员信息">
                    <el-input v-model="item.flowZsDt.driverInfo" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="驾驶员联系方式">
                    <el-input v-model="item.flowZsDt.drivercontact" placeholder="请输入驾驶员联系方式" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="起运时间">
                    <el-date-picker v-model="item.flowZsDt.startDatetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
                                    :style="{width: '100%'}" placeholder="" clearable readonly></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="预计到货时间">
                    <el-date-picker v-model="item.flowZsDt.endDatetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
                                    :style="{width: '100%'}" placeholder="" clearable readonly></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="医院收货人">
                    <el-input v-model="item.flowZsDt.hospitalShr" placeholder="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="收货人联系方式">
                    <el-input v-model="item.flowZsDt.yscontact" placeholder="未获取收货人联系方式" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="收货时间" prop="field101">
                    <el-date-picker v-model="item.flowZsDt.shdate" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
                                    :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
                                    placeholder="" clearable readonly></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="验收情况">
                    <el-col :lg="12">
                      <el-form-item label="合格:" label-width="70px">
                        <el-input v-model="item.flowZsDt.qualified" placeholder=" " readonly></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :lg="12">
                      <el-form-item label="不合格:" label-width="70px">
                        <el-input v-model="item.flowZsDt.unqualified" placeholder=" " readonly></el-input>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                </el-col>
                <el-col :lg="8">
                  <el-form-item label="质检报告">
                    <file-upload v-model="item.flowZsDt.qualityReport" :show-shangchu="false" :show-shangchuan="false" :is-show-tip="false"/>
                  </el-form-item>
                </el-col>

              </el-form>
            </el-col>

          </div>
        </el-card>
      </div>
<!--    </div>-->


  </div>
</template>

<script>

import {listCoursefrom, listCoursefromtransErp} from "@/api/flow/produceAndTrans";
//vue使用qrcode插件将后端返回的二维码字符串生成二维码
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas';

export default {
  data(){
    return {
      loading:true,
      srceee:[//转码后的图片路径-里面内容不加会有控制台报错提示,不影响使用
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false}
      ],
      srceee2:[//转码后的图片路径-里面内容不加会有控制台报错提示,不影响使用
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false},
        {picurl:null,ifSrceee:false}
      ],
      userList:{},
      formData: [
        {
          ifShow:false,//是否展开
          amount:0.00,
          billNo:0,
          billSn:0,
          billSort:0,
          bsdate:"",
          createBy:"",
          createTime:"",
          orderDate:"",
          entId:"",
          execnum:0,
          goodsId:"",
          goodsname:"",
          num:0.00,
          oldprice:0.00,
          orderid:0,
          price:0.00,
          qcode:"",
          ufGoodsrat:"0MBq",
          remark:"",
          specRequmts:"",
          updateBy:"",
          updateTime:"",
          flowOrderMt:{
            hospitalname:"",
            manufacturer:"",
            orderDate:"",
            orderId:""
          },
          flowZsDt:{
            batchcode:"",
            createBy:"",
            createTime:"",
            driverInfo:"",
            endDatetime:"",
            hospitalShr:"",
            produceDate:"",
            qcode:"",
            qualityReport:"",
            remark:"",
            shdate:"",
            shipper:"",
            startDatetime:"",
            transportUnit:"",
            updateBy:"",
            updateTime:"",
            validDate:"",
            vehicleInfo:"",
          }
        }
      ],
      queryParams:{
        orderId:0
      },
      rules: {
        field101: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field102: [{
          required: true,
          message: '请输入生产企业名称',
          trigger: 'blur'
        }],
        field103: [{
          required: true,
          message: '请输入单行文本',
          trigger: 'blur'
        }],
        field001: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
      },
    }
  },
  created() {
    this.queryParams.orderId= this.$route.query.orderId;
    // console.log('上级传参',querys)
    // if(querys.qrresult){
    //   this.qcode=querys.qrresult
    // }
    this.getList()
  },
  methods:{
    ifShowClick(index){
      this.formData[index].ifShow=!this.formData[index].ifShow
      this.$set(this.formData, index, this.formData[index])
      // console.log('ifShow',this.formData[index].ifShow)
    },
    //判断是否为微信浏览器,是则执行base64转png图片-其他浏览器不转png,不然影响下载功能使用
    isWeixin(){
      let ua = navigator.userAgent.toLowerCase(); //判断是否是微信浏览器
      let isWeixin = ua.indexOf("micromessenger") != -1; //判断是否
      if (isWeixin) {
      }
      for (let i=0;i<this.formData.length;i++){
        this.base64bianma(this.formData[i].goodsname,this.formData[i].orderid,i)
      }


    },
    cutDiv(goodsname,orderid,u){
      var opts = {
        backgroundColor: null,//设置图片背景为透明
        // backgroundColor:"#26A1DF",
        // scale: scale,
        // canvas: canvas,
        // width: width,
        // height: height,
        // dpi: window.devicePixelRatio
      }
      html2canvas(this.$refs.downpar[u],opts).then(canvas => {
          let a = document.createElement("a");
          a.href = canvas.toDataURL("image/png");
          // a.href = canvas.toDataURL();
          let curTime = this.getCurrentTime(); //获取当前时间
          a.download = goodsname+'-'+orderid+'-'+curTime; //图片名（药品名称+订单号+日期）
          let posters =a.href.replace(/(\r\n)|(\n)|(\r)/g, "");//去除空格
        this.srceee2[u].picurl=posters
        this.srceee2[u].ifSrceee=true
        this.loading = false;
      })
    },
    //base64编码获取-去除空格(这样安卓才能识别下载)
    base64bianma(goodsname,orderid,index){
      // console.log('112233',goodsname,orderid,index)
      let curTime = this.getCurrentTime(); //获取当前时间
      let myCanvas = document.getElementById("qrcode"+index).getElementsByTagName("canvas");
      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/png");
      a.download = goodsname+'-'+orderid+'-'+curTime; //图片名（药品名称+订单号+日期）
      // let sss=this.base64ImgtoFile(a.href)
      let posters =a.href.replace(/(\r\n)|(\n)|(\r)/g, "");//去除空格
      // this.srceee[index].picurl=URL.createObjectURL(sss)

      this.srceee[index].picurl=posters
      this.srceee[index].ifSrceee=true
      this.$nextTick().then(()=>{
          for (let u=0;u<this.formData.length;u++){
            //div再次转为图片
            this.cutDiv(this.formData[u].goodsname,this.formData[u].orderid,u)
          }
      })
    },
    //base64转图片方法
    base64ImgtoFile(dataurl, filename = 'file') {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },
    /** 查询产品信息明细 */
    getList() {
      this.loading = true;
      // console.log('查询参数',this.queryParams.orderId)
      let that = this;
      listCoursefromtransErp(this.queryParams).then(response => {
          // console.log('查询返回',response.rows)
          that.formData = response.rows;
          that.total = response.total;
          that.srceee=[]
          that.srceee2=[]
          for(let i=0;i<that.formData.length;i++){
              //如果没有mbq单位，则加一下
              if(that.formData[i].ufGoodsrat.toLowerCase().indexOf('mbq') == -1){
                that.formData[i].ufGoodsrat = that.formData[i].ufGoodsrat+"MBq"
              }
              that.formData[i].ifShow=false
              that.srceee.push({picurl:null,ifSrceee:false})
              that.srceee2.push({picurl:null,ifSrceee:false})
          }
          this.$nextTick(()=>{
            if(this.formData.length > 0){
              this.formData.forEach((item,key) =>{
                //调用字符串生成二维码的方法
                this.creatQrCode(item.qcode,key);

              })
            }
          })
          this.$nextTick(()=>{
            this.isWeixin()
          })
        }
      );
    },
    //字符串生成二维码的方法
    creatQrCode(LabelCode,key) {
      console.info(this.$refs.qrCodeUrl[key])
      var qrcode = new QRCode(this.$refs.qrCodeUrl[key], {
        text: LabelCode, // 需要转换为二维码的内容
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    //下载二维码图片
    downloadQRCode(goodsname,orderid,index) {
      let ua = navigator.userAgent.toLowerCase(); //判断是否是微信浏览器
      let isWeixin = ua.indexOf("micromessenger") != -1; //判断是否
      if (isWeixin) {
        this.$modal.msgError(`微信浏览器请长按图片保存`);
        return false;
      }
      let curTime = this.getCurrentTime(); //获取当前时间
      // let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
      let myCanvas = document.getElementById("qrcode"+index).getElementsByTagName("canvas");
      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/png");
      a.download = goodsname+'-'+orderid+'-'+curTime; //图片名（药品名称+订单号+日期）
      a.click();
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy+""+mm+""+dd+""+hh+""+mf+""+ss;
      return _this.gettime;
    }

  }

}
</script>

<style >
 .el-col-lg-24 {
   margin-bottom: 2%;
 }
 .qrcode {
   min-width: 80px;
   min-height: 80px;
 }
 .qrcode-par {
   display: flex;
   display:-ms-flexbox;
   display:-webkit-flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-left: 2%;
 }
.text-par {
  flex: 1;
  -webkit-flex: 1;/*解决苹果flex:1不兼容问题*/
  -webkit-box-flex: 1;
  /*padding-left: 10px;*/
  font-size: 1rem;
  /*font-weight: 700;*/
  color: #000;
  height: 100%;
  /*width: 64%;*/
}
 .logo3 {
   width: 80%;
   height: auto;
   padding-right: 0%;
   padding-bottom: 10%;
 }
 .text-par div {
   /*margin-bottom: 2%;*/
   padding:1%;
 }
 /*.text-par>div:last-child  {*/
 /*  padding: 0%;*/
 /*}*/

 [class^='downpar'] {

   display: flex;
   display:-ms-flexbox;
   display:-webkit-flex;
   align-items: center;
   /*width: auto;*/
   width: calc(100% - 40px);
   min-height: 80px;
   /*padding:0% 5%;*/
 }
 .parent {
   display: flex;
   display:-ms-flexbox;
   display:-webkit-flex;
   align-items: center;
   justify-content: space-between;
   background:linear-gradient(to right, #13B797 , #26A1DF);
   /*background:#fff;*/
   border-radius: 10px;
   padding: 10px 5px 10px 0px;
   color: #000;
   /*border:2px solid #000;*/
   box-shadow: 0px -1px 6px 1px rgb(182 184 183)
 }

 .el-card__body{
   padding:15px !important;
 }
 .el-form-item__label {
   color:#000 !important;
 }
 .pic-part {
   display: flex;
   display:-ms-flexbox;
   display:-webkit-flex;
   flex-direction: column;
   align-items: center;

   /*flex: 1;*/
   /*-webkit-flex: 1;!*解决苹果flex:1不兼容问题*!*/
   /*-webkit-box-flex: 1;*/
   width: 36%;
 }
 .text-par .child {
   display: flex;
   display:-ms-flexbox;
   display:-webkit-flex;
   align-items: center;
 }
 .text-par .child .textone{
   white-space: nowrap;
   display: flex;
   display:-ms-flexbox;
   display:-webkit-flex;
 }
 html{
   font-size: 12px;
 }
</style>
